繼上一篇今天要來將SCSS單元完結啦~

引入

CSS有一個不常用的功能 @import 它的功能是導入其他的CSS檔，然而這些檔案只有在用到時才會被加載，一定程度的降低了網站執行的速度，而SCSS擴充了***@import***這個功能，他可以在SCSS檔中任一處插入其他SCSS檔的程式碼，且在編譯時就將要用到的CSS檔導入進來。

// 在SCSS
@import 'test1';
#main {
    height: 100px;
    .red-sq{
        background-color: rgb(50, 219, 73);

    }
}
@import 'test2';

由上圖可以發現，被引入的檔案毋須加上.scss/.sass等後綴，系統會自動尋找同名的副檔名的.scss或.sass文件，

/* 編譯成CSS後 */
.orange-juice {
  background-color: rgb(244, 142, 9);
  height: 100px;
  width: 30px;
  border: 1px solid rgb(198, 198, 198);
}

#main {
  height: 100px;
}
#main .red-sq {
  background-color: rgb(50, 219, 73);
}

.apple-juice {
  background-color: rgb(244, 231, 169);
  height: 120px;
  width: 40px;
  border: 1px solid rgb(198, 198, 198);
}

在中大型專案中常會將固定的樣式設定在某些SCSS檔中，然後被多個SCSS引入，而那些存放固定樣式的SCSS檔通常不需要再被生成為獨立的CSS檔，這種檔案可以在名稱前加上一個下劃線，就能避免編譯出多餘的CSS檔，系統會自動略過該檔案；另外，在引入時，該檔案毋須打下劃線。

@import 默認情況，會預設導入同名的 .sass 或 .scss 文件，但在以下情況下，僅當成一般的 CSS @import 語句，不會導入任何的 SASS 文件，如下：

• 如果文件的副檔名是 .css ：@import "foo.css";
• 文件名以 http:// 開始 ：@import "http://foo.com/bar";
• 文件名是 url() ：@import url(foo);
• @import 中包含媒體查詢（media queries）

混合mixin

若有會一直重複用到的CSS片段，可以利用 @mixin 包裝起來，有點像是宣告成一個變數，在需要用的地方以***@include***呼叫使用。

@mixin font-style {
    font: {
        size: 25px;
        family: 'Courier New', Courier, monospace;
        weight:bold;
    }
    color:antiquewhite;
}

.article p{
    @include font-style;
}

混合功能還能設定參數，參數還能設定默認值，使得整體應用更靈活

@mixin border-set($color, $width, $style: solid) {
    border: {
        color: $color;
        width: $width;
        style: $style;
    }
}
.container {
@include border-set(red, 2px);
background:#000;
}

繼承extend

繼承是很常被用到的功能，以***@extend***可以繼承其他類別的樣式，先來看看以下範例。

%standard-style{
width:100px;
height:100px;

}
.box1{
@extend standard-style
background-color:#000;
}

.box2{
@extend .box1;
border:1pz #fff solid;
}

觀察可以得知，可以繼承已存在的類別，以***%***定義的樣式差別是不會被編譯在css檔中。

以上是SCSS較常用到的功能，應該可以發現以上工具基本上都能增加開發的效率和專案的管理。